<template>
  <div class="avue-logo">
    <transition name="fade">
      <span v-if="menuCollapse"
            class="avue-logo_subtitle"
            key="0">
        {{ website.logo }}
      </span>
    </transition>
    <transition-group name="fade">
      <template v-if="!menuCollapse">
        <span class="avue-logo_title"
              key="1">{{ website.indexTitle }} </span>
      </template>
    </transition-group>
  </div>
</template>

<script>
import {mapState} from "pinia";
import useCommonStore from "@/stores/useCommonStore";
import {getScreen} from "utils/util";
import website from "../../config/website";

export default {
  name: "logo",
  props: {
    menuCollapse: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {};
  },
  created() {
  },
  computed: {
    website() {
      return website
    },
    ...mapState(useCommonStore, ["isCollapse"])
  },
  methods: {getScreen}
};
</script>
